<template>
  <el-card>
    <el-row :gutter="20" class="header">
            <el-col :span="4">
              <el-input placeholder="搜索编号" clearable v-model="queryForm.id"></el-input>
            </el-col>
            <el-button type="primary" :icon="Search" @click="query">搜索</el-button>
      <el-button type="primary" @click="handleAdd" style="margin-left: 60px">添加领料信息单据</el-button>
    </el-row>
    <el-row class="header">
      <el-table :data="tableData" border style="width: 100%">
<!--        <el-table-column prop="id" label="编号" />-->
        <el-table-column prop="accessories.name" label="配件名称" />
<!--        <el-table-column prop="maintainRecord.des" label="描述" style="width: 100px" />-->
        <el-table-column prop="count" label="领料数量"/>
        <el-table-column prop="useTime" label="指派时间" :formatter="formatTime" />
        <el-table-column prop="createTime" label="单据创建时间" :formatter="formatTime" />
<!--        <el-table-column prop="maintainRecord.speedStatus" label="当前进度">-->
<!--          <template #default="{ row }">-->
<!--            <el-tag type="success" effect="dark" v-if="row.maintainRecord.speedStatus=='1'">服务登记</el-tag>-->
<!--            <el-tag type="success" effect="dark" v-if="row.maintainRecord.speedStatus=='2'">指派员工</el-tag>-->
<!--            <el-tag type="success" effect="dark" v-if="row.maintainRecord.speedStatus=='3'">服务中</el-tag>-->
<!--            <el-tag type="warning" effect="dark" v-if="row.maintainRecord.speedStatus=='4'">服务结束</el-tag>-->
<!--            <el-tag type="success" effect="dark" v-if="row.maintainRecord.speedStatus=='5'">金额结算</el-tag>-->
<!--            <el-tag type="success" effect="dark" v-if="row.maintainRecord.speedStatus=='6'">服务完成</el-tag>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column prop="maintainRecord.signStatus" label="用户是否签字">-->
<!--          <template #default="{ row }">-->
<!--            <el-tag type="success" effect="dark" v-if="row.maintainRecord.signStatus==1">已签字</el-tag>-->
<!--            <el-tag type="warning" effect="dark" v-if="row.maintainRecord.signStatus==2">未签字</el-tag>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column prop="maintainRecord.pickingStatus" label="领料审核状态">
          <template #default="{ row }">
            <el-tag type="warning" effect="dark" v-if="row.maintainRecord.pickingStatus==1">未审核</el-tag>
            <el-tag type="success" effect="dark" v-if="row.maintainRecord.pickingStatus==2">已通过</el-tag>
            <el-tag type="warning" effect="dark" v-if="row.maintainRecord.pickingStatus==3">未通过</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="250">
          <template #default="{ row }">
            <el-button type="primary" @click="Query(row)">同意</el-button>
            <el-button type="primary" @click="Query2(row)">拒绝</el-button>
            <el-button type="primary" :icon="Odometer" circle @click="handleEdit(row)"></el-button>
            <el-button type="danger" :icon="Delete" circle @click="removeById(row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-pagination
      v-model:current-page="queryForm.pageNum"
      v-model:page-size="queryForm.pageSize"
      :page-sizes="[10, 20, 30, 50]"
      layout="prev, pager, next, jumper, sizes, total"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :background="true"
    />
  </el-card>
  <Dialog v-model="dialogVisible"
          :dialogTitle="dialogTitle"
          v-if="dialogVisible"
          @query="query"
          :dialogRowValue="dialogRowValue" />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Search, Delete, Odometer } from '@element-plus/icons-vue'
import { list, remove } from '../../../api/picking'
import { modify } from '../../../api/maintainRecord'
import Dialog from './dialog'
import { ElMessageBox, ElMessage } from 'element-plus'
import jwtDecode from 'jwt-decode'

const queryForm = ref({
  id: '',
  pageNum: 1,
  pageSize: 10
})

const tableData = ref([])
const total = ref(0)
const dialogVisible = ref(false)
const dialogTitle = ref('')

async function query() {
  const resp = await list(queryForm.value)
  tableData.value = resp.data.data.list
  total.value = resp.data.data.total
}

async function Query(row) {
  row.pickingStatus = 2
  row.id = row.recordId
  await modify(row)
  console.log(row)
  ElMessage({
    type: 'success',
    message: '同意成功！'
  })
  query()
}
async function Query2(row) {
  row.pickingStatus = 3
  row.id = row.recordId
  await modify(row)
  ElMessage({
    type: 'success',
    message: '拒绝成功！'
  })
  query()
}

onMounted(() => {
  // 获取token
  const token = localStorage.getItem('token')
  // 解析获取token
  const decode = jwtDecode(token).id // 解析
  // 保存accoundId
  queryForm.value.id = decode
  query()
})

function handleCurrentChange(pageNum) {
  queryForm.value.pageNum = pageNum
  query()
}

function handleSizeChange(pageSize) {
  queryForm.value.pageNum = 1
  queryForm.value.pageSize = pageSize
  query()
}

const dialogRowValue = ref({})
// 添加
function handleAdd() {
  dialogTitle.value = '添加'
  dialogRowValue.value = {}
  dialogVisible.value = true
}
// 编辑
function handleEdit(row) {
  dialogTitle.value = '编辑'
  dialogRowValue.value = JSON.parse(JSON.stringify(row))
  dialogVisible.value = true
}
// 删除
function removeById(row) {
  ElMessageBox.confirm(
    '是否确认删除?',
    '确认框',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消'
    }
  ).then(async () => {
    await remove(row.id)
    ElMessage({
      type: 'success',
      message: '删除成功'
    })
    query()
  }).catch(() => {
    /*
    ElMessage({
      type: 'info',
      message: 'Delete canceled'
    })
     */
  })
}

function formatTime(row, column) {
  const date = new Date(row[column.property])
  const year = date.getFullYear()
  let month = date.getMonth() + 1
  if (month < 10) {
    month = '0' + month
  }
  let day = date.getDate()
  if (day < 10) {
    day = '0' + day
  }
  return year + '-' + month + '-' + day
}
</script>

<style lang="scss" scoped>
.header {
  padding-bottom: 16px;
  box-sizing: border-box;
}
::v-deep .el-input__suffix {
  align-items: center;
}
</style>
